<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        body{
        width: 100%;
        height: 100%;
        }
        div{
        width: 100px;
        height: 100px;
        }
        .box{
        padding-left: 50px;
        margin: 0 auto;
        width: 35%;
        height: 150px;
        border: 2px solid gainsboro ;
        border-radius: 1%;
        }
        #red,#green,#yellow{
        width: 100px;
        height: 100px;
        margin-top: 25px;
        margin-right: 25px;
        border: 1px solid gainsboro;
        border-radius: 100%;
        display: inline-block;
        background:gray;
        }
        .count{
        font-size: 30px;
        float: right;
        margin-right: 70px;
        margin-top: 50px;
        }
        
        </style>

    </head>

    <body>
        <div class="box">
            <div id="red"></div>
            <div id="yellow"></div>
            <div id="green" ></div>
            <div id="count" class="count"></div>
        </div>
            <script>
            var lamp={
                 //红灯相关数据
            red: {  
                obj:document.getElementById('red'),
                timeout:30,
                style:['red','gray','gray'],
                next:'green'
            },
                 //黄灯相关数据
            yellow:{
                obj:document.getElementById('yellow'),
               timeout:5,
               style:['gray','yellow','gray'],
               next:'red'
            },
                 //绿灯相关数据
            green:{
                obj:document.getElementById('green'),
                timeout:35,
                style:['gray','gray','green'],
                next:'yellow'
            },
            changeStyle(style){
                this.red.obj.style.background=style[0];
                this.yellow.obj.style.background=style[1];
                this.green.obj.style.background=style[2]
            }
           } ;
           var count={
            obj:document.getElementById('count'),
            change:function(num){
                this.obj.innerText=(num<10) ? ('0'+num):num;
            }
           };
           var now =lamp.green;
           var timeout=now.timeout;
           lamp.changeStyle(now.style);
           count.change(timeout);
           setInterval(function(){
            if(--timeout<=0){
                now =lamp[now.next];
                timeout=now.timeout;
                lamp.changeStyle(now.style);
            }
            count.change(timeout);
           },1000);
           
        </script>
    </body>
</html>
